<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :width="width"
    :zIndex="zIndex"
    :wrapClassName="wrapClassName"
    @ok="handleOk"
  >
    <template #footer>
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk" :loading="confirmLoading">确定</a-button>
    </template>
    <div class="modal_content">
      <slot name="content"></slot>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance } from "vue";

export default defineComponent({
  name: "ABaseModal",
  props: {
    // api: https://2x.antdv.com/components/modal-cn
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 520,
    },
    title: {
      type: String,
      default: "",
    },
    zIndex: {
      type: Number,
      default: 1000,
    },
    wrapClassName: {
      type: String,
      default: "",
    },
    confirmLoading: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["onHandleOk", "onHandleCancel"],
  setup(props, { attrs, slots, emit }) {
    // 确定
    const handleOk = (e: MouseEvent) => {
      emit("onHandleOk", null);
      console.log('is OK!')
    };
    // 取消
    const handleCancel = (e: MouseEvent) => {
      emit("onHandleCancel", null);
      console.log('is Cancel!')
    };
    return {
      handleOk,
      handleCancel,
    };
  },
  methods: {
    //
  },
});
</script>

<style lang="scss" scoped>
</style>